<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns='http://www.w3.org/1999/xhtml'>
    <head>
        <meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
        <title>On this day for Blogger - Code Generator</title>
        <style>
            body{
                /*margin: 0px;*/
                background-color: LightCyan;
                font-family: Arial;
                font-size: 1em;
                }
            div#sidebar {
                width: 200px;
                float: right;
                }
            a{
                text-decoration: none;
                }
            textarea{
                border: 1px solid black;
                }
            fieldset {
                border: none;
                }
            fieldset label,
            fieldset input {
                display: block;
                float: left;
                margin-bottom: 10px; 
                }
            fieldset label {
                text-align: right;
                width: 200px;
                padding-right: 20px;
                }
            fieldset input{
                border: 1px solid RoyalBlue;
                background-color: Coral;
                font-size: 1em;
                color: Blue;
                }
            br.clear{
                clear: both;
                }
            div#sidebar ul {
                padding-left: 16px;
                }
        </style>
        <script type="text/javascript">
            function GetPair(id) {
                var key = document.getElementById(id);
                if (key.value != "")
                    return "&amp;" + id + "=" + escape(key.value);
                return "";
                }
            function Generate() {
                var headCode = document.getElementById("headCode");
                headCode.value = '<link type="text\/css" href="http:\/\/http:\/\/livibetter.googlepages.com\/onthisday.css" rel="stylesheet" >\n';
                headCode.value += '<script type="text\/javascript" src="http:\/\/www.google.com\/jsapi?key=' + document.getElementById("apiKey").value + '"><\/script>\n';
                headCode.value += '<script type="text\/javascript" src="http:\/\/livibetter.googlepages.com\/jquery.js"><\/script>\n';
                var qs = "";
                qs += GetPair("blogID");
                qs += GetPair("targetID");
                qs += GetPair("timezone");
                qs += GetPair("excludeThisYear");
                qs += GetPair("limitPosts");
                qs += GetPair("limitYears");
                qs += GetPair("loadingMsg");
                qs += GetPair("errorMsg");
                qs += GetPair("noPostMsg");
                if (qs.length > 0)
                    qs = '?' + qs.substring(5);
                headCode.value += '<script type="text\/javascript" src="http:\/\/livibetter.googlepages.com\/onthisday.js' + encodeURI(qs) + '"><\/script>';

                var sidebarCode = document.getElementById("sidebarCode");
                sidebarCode.value = '<h2>On this day...<\/h2>\n';
                sidebarCode.value += '<div id="' + document.getElementById("targetID").value + '"/>';
                }
        </script>
    </head>
<body>
<div class="wrap">
    <h1>On this day for Blogger - Code Generator</h1>

    <div id="sidebar">
        <h2>About</h2>
        This project is written by <a href="http://www.livibetter.com/">Yu-Jie Lin</a> and licensed under GPL v3.
        <h2>Related Links</h2>
        <ul>
            <li><a href="http://code.google.com/p/blogger-otd/">Project's website</a></li>
            <li><a href="http://groups.google.com/group/otd-for-blogger/">Get Support</a></li>
        </ul>
        <form action="https://www.paypal.com/cgi-bin/webscr" method="post">
        <div>
        <input type="hidden" name="cmd" value="_s-xclick"/>
        <input type="image" src="https://www.paypal.com/en_US/i/btn/x-click-but21.gif" style="border:0" name="submit" alt="Make payments with PayPal - it's fast, free and secure!">
        <img alt="" border="0" src="https://www.paypal.com/en_US/i/scr/pixel.gif" width="1" height="1">
        <input type="hidden" name="encrypted" value="-----BEGIN PKCS7-----MIIH0QYJKoZIhvcNAQcEoIIHwjCCB74CAQExggEwMIIBLAIBADCBlDCBjjELMAkGA1UEBhMCVVMxCzAJBgNVBAgTAkNBMRYwFAYDVQQHEw1Nb3VudGFpbiBWaWV3MRQwEgYDVQQKEwtQYXlQYWwgSW5jLjETMBEGA1UECxQKbGl2ZV9jZXJ0czERMA8GA1UEAxQIbGl2ZV9hcGkxHDAaBgkqhkiG9w0BCQEWDXJlQHBheXBhbC5jb20CAQAwDQYJKoZIhvcNAQEBBQAEgYAQF3ynTH7NghKuIFXjORRRqi9DNlK98fokYHYS63gHj+m0TWOqLHD89w6FLBOMeJ99b2vbfep7JBVi9jAd8cFse6pnCxdhCVbNvo54xP2KOA40RjqYGTxXuI53DxCbbkHv0oNb0sgdzC9bvCJ7rbphMZVOc9WQlVFGOiRLPj7R3TELMAkGBSsOAwIaBQAwggFNBgkqhkiG9w0BBwEwFAYIKoZIhvcNAwcECDCkWHNesJsSgIIBKDuMppEpPz45BMg14TYKY2tSjeL22m30JW4kpo4tLhL2xTZSz7AdfSxn9otppGlp3GaSLol+bu+UZ53lgqXJ/rAN/3qlH3/fJXz9GzLizaWzhk8EPsKBkspswXZLXPuKums8jUBptFGr/JqJSGP8MMTBNeW+B+5XZ7iKLH3arwH8b8kyDH51ZeMgCGTqAm2zKTED+YLQx+lL3zYRDIeFXxgpzgbEbDaCNg26cD/Kj061YQS+wKGgngnh0HP64btrdU1HpNpWV7MWWynF9BqP0HyOyF3pLvQtHSVbJK5SxIUsDv9B/b5JEE1WhYOURx3YtQMQdjJNVinsZI6bvwDvXQiYL84YBwbEsVMCpLukbbn8Ph2ImKsgCwrGpaT2tVbZC3Q6iodEMJADoIIDhzCCA4MwggLsoAMCAQICAQAwDQYJKoZIhvcNAQEFBQAwgY4xCzAJBgNVBAYTAlVTMQswCQYDVQQIEwJDQTEWMBQGA1UEBxMNTW91bnRhaW4gVmlldzEUMBIGA1UEChMLUGF5UGFsIEluYy4xEzARBgNVBAsUCmxpdmVfY2VydHMxETAPBgNVBAMUCGxpdmVfYXBpMRwwGgYJKoZIhvcNAQkBFg1yZUBwYXlwYWwuY29tMB4XDTA0MDIxMzEwMTMxNVoXDTM1MDIxMzEwMTMxNVowgY4xCzAJBgNVBAYTAlVTMQswCQYDVQQIEwJDQTEWMBQGA1UEBxMNTW91bnRhaW4gVmlldzEUMBIGA1UEChMLUGF5UGFsIEluYy4xEzARBgNVBAsUCmxpdmVfY2VydHMxETAPBgNVBAMUCGxpdmVfYXBpMRwwGgYJKoZIhvcNAQkBFg1yZUBwYXlwYWwuY29tMIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQDBR07d/ETMS1ycjtkpkvjXZe9k+6CieLuLsPumsJ7QC1odNz3sJiCbs2wC0nLE0uLGaEtXynIgRqIddYCHx88pb5HTXv4SZeuv0Rqq4+axW9PLAAATU8w04qqjaSXgbGLP3NmohqM6bV9kZZwZLR/klDaQGo1u9uDb9lr4Yn+rBQIDAQABo4HuMIHrMB0GA1UdDgQWBBSWn3y7xm8XvVk/UtcKG+wQ1mSUazCBuwYDVR0jBIGzMIGwgBSWn3y7xm8XvVk/UtcKG+wQ1mSUa6GBlKSBkTCBjjELMAkGA1UEBhMCVVMxCzAJBgNVBAgTAkNBMRYwFAYDVQQHEw1Nb3VudGFpbiBWaWV3MRQwEgYDVQQKEwtQYXlQYWwgSW5jLjETMBEGA1UECxQKbGl2ZV9jZXJ0czERMA8GA1UEAxQIbGl2ZV9hcGkxHDAaBgkqhkiG9w0BCQEWDXJlQHBheXBhbC5jb22CAQAwDAYDVR0TBAUwAwEB/zANBgkqhkiG9w0BAQUFAAOBgQCBXzpWmoBa5e9fo6ujionW1hUhPkOBakTr3YCDjbYfvJEiv/2P+IobhOGJr85+XHhN0v4gUkEDI8r2/rNk1m0GA8HKddvTjyGw/XqXa+LSTlDYkqI8OwR8GEYj4efEtcRpRYBxV8KxAW93YDWzFGvruKnnLbDAF6VR5w/cCMn5hzGCAZowggGWAgEBMIGUMIGOMQswCQYDVQQGEwJVUzELMAkGA1UECBMCQ0ExFjAUBgNVBAcTDU1vdW50YWluIFZpZXcxFDASBgNVBAoTC1BheVBhbCBJbmMuMRMwEQYDVQQLFApsaXZlX2NlcnRzMREwDwYDVQQDFAhsaXZlX2FwaTEcMBoGCSqGSIb3DQEJARYNcmVAcGF5cGFsLmNvbQIBADAJBgUrDgMCGgUAoF0wGAYJKoZIhvcNAQkDMQsGCSqGSIb3DQEHATAcBgkqhkiG9w0BCQUxDxcNMDcwOTIyMDQxODU2WjAjBgkqhkiG9w0BCQQxFgQUu7xI6GdAajrIs6N9XyKW/e14JXIwDQYJKoZIhvcNAQEBBQAEgYCdsVyNYWuz4Xn2OIudWwGKiwHLTdtif0SEGuQYX9jfMeZIyb+FWMGdquMsrNJVVtrDmP/q1S4ihpa4olpRJ83HBJxaplfVsN1ODnluZkyId5F7//0EJXr2vvE9lAG11TzMEzuEeICTrd8ct0d4NEUSjKN01GTS0QMH3q+bCEHDkA==-----END PKCS7-----
        "/>
        </div>
        </form>
    </div>

    <h2>Settings</h2>
    <fieldset>
        <label for="apiKey">Google AJAX Feed API Key</label>
        <input type="text" id="apiKey"/>
        <br class="clear"/>

        <label for="blogID">Blog ID</label>
        <input type="text" id="blogID"/>
        <br class="clear"/>
    
        <label for="targetID">Target Div ID</label>
        <input type="text" id="targetID" value="feed"/>
        <br class="clear"/>

        <label><strong>Optional</strong></label>
        <br class="clear"/>

        <label for="timezone">Timezone</label>
        <input type="text" id="timezone" value=""/> e.g. -08:00
        <br class="clear"/>

        <label for="limitPosts">Posts Limit</label>
        <input type="text" id="limitPosts" value=""/> e.g. 5
        <br class="clear"/>

        <label for="limitYears">Years Limit</label>
        <input type="text" id="limitYears" value=""/> e.g. 5
        <br class="clear"/>

        <label for="excludeThisYear">Exclude posts from current year</label>
        <input type="text" id="excludeThisYear" value=""/> e.g. true, false
        <br class="clear"/>

        <label for="loadingMsg">Loading Message</label>
        <input type="text" id="loadingMsg" value=""/> e.g. Loading..., 讀取中…
        <br class="clear"/>

        <label for="errorMsg">Error Message</label>
        <input type="text" id="errorMsg" value=""/> e.g. Something went wrong!, 無法完成讀取！
        <br class="clear"/>

        <label for="noPostMsg">No Post Message</label>
        <input type="text" id="noPostMsg" value=""/> e.g. No post on this day., 本日無文章
        <br class="clear"/>

        <label></label>
        <input type="button" value="Generate" onclick="Generate()"/>
    </fieldset>
    
    <h2>Code</h2>
    <h3>head</h3>
    <textarea id="headCode" cols="80" rows="5"></textarea>
    <h3>sidebar</h3>
    <textarea id="sidebarCode" cols="80" rows="5"></textarea>
</div>
</body>
</html>